<script setup>
import { onMounted, ref } from 'vue'
import CompoThreejs from '@renderer/components/CompoThreejs.vue'

const compoThreejsRef = ref(null)

const cameraPosX = ref(0)
const cameraPosY = ref(0)
const cameraPosZ = ref(-40)
// function go2Viewfront() {
//   cameraPosX.value = 0
//   cameraPosY.value = 0
//   cameraPosZ.value = -40
// }
// function go2ViewLeft() {
//   cameraPosX.value = 40
//   cameraPosY.value = 0
//   cameraPosZ.value = 0
// }
// function go2ViewRight() {
//   cameraPosX.value = -40
//   cameraPosY.value = 0
//   cameraPosZ.value = 0
// }
// function go2ViewTop() {
//   cameraPosX.value = 0
//   cameraPosY.value = 40
//   cameraPosZ.value = -0.1
// }
// function go2ViewBottom() {
//   cameraPosX.value = 0
//   cameraPosY.value = -40
//   cameraPosZ.value = -0.1
// }
// function go2ViewBack() {
//   cameraPosX.value = 0
//   cameraPosY.value = 0
//   cameraPosZ.value = 40
// }
function switchToView(view) {
  if (compoThreejsRef.value && typeof compoThreejsRef.value[view] == 'function') {
    compoThreejsRef.value[view]()
  }
}
onMounted(() => {})
</script>

<template>
  <div class="mainview">
    <div id="main_jiaodu" class="fullimg"></div>
    <div id="yinmu3d">
      <CompoThreejs
        ref="compoThreejsRef"
        gltf-url="models/porcelain_plate_from_the_flora_danica_service.glb"
        scene-background="#12345600"
        :camera-x="cameraPosX"
        :camera-y="cameraPosY"
        :camera-z="cameraPosZ"
        :max-distance="150"
        :min-distance="25"
        product-name=""
      ></CompoThreejs>
    </div>
    <!-- <div id="an2zm" class="anrotate" @click="go2Viewfront"></div>
    <div id="an2zuo" class="anrotate" @click="go2ViewLeft"></div>
    <div id="an2you" class="anrotate" @click="go2ViewRight"></div>
    <div id="an2shang" class="anrotate" @click="go2ViewTop"></div>
    <div id="an2xia" class="anrotate" @click="go2ViewBottom"></div>
    <div id="an2fm" class="anrotate" @click="go2ViewBack"></div> -->
    <div id="an2zm" class="anrotate" @click="switchToView('toFrontView')"></div>
    <div id="an2zuo" class="anrotate" @click="switchToView('toLeftView')"></div>
    <div id="an2you" class="anrotate" @click="switchToView('toRightView')"></div>
    <div id="an2shang" class="anrotate" @click="switchToView('toTopView')"></div>
    <div id="an2xia" class="anrotate" @click="switchToView('toBottomView')"></div>
    <div id="an2fm" class="anrotate" @click="switchToView('toBackView')"></div>
  </div>
</template>

<style lang="scss" scoped>
.mainview {
  box-sizing: border-box;
  width: 100vw;
  height: 56.25vw;
  background: url(/lianliankan_0bg.jpg) no-repeat;
  background-size: 100vw 56.25vw;
  background-position: center;
  position: relative;
  z-index: 0;
  .fullimg {
    width: 100vw;
    height: 56.25vw;
    position: absolute;
    left: 0;
    top: 0;
  }
  #main_jiaodu {
    background: url(/main/main_jiaodu.png) no-repeat;
    background-size: 100vw 56.25vw;
    background-position: center;
    z-index: 1;
  }
  #yinmu3d {
    width: 44vw;
    height: 44vw;
    background-color: transparent;
    position: absolute;
    left: 27vw;
    top: 8vw;
    z-index: 4;
    border: 0px solid red;
  }
  .anrotate {
    z-index: 9;
    border: 0px solid red;
  }
  #an2zm {
    width: 11vw;
    height: 11vw;
    position: absolute;
    left: 13.2vw;
    top: 22.6vw;
  }
  #an2zuo {
    width: 5vw;
    height: 11vw;
    position: absolute;
    left: 8vw;
    top: 22.6vw;
  }
  #an2you {
    width: 5vw;
    height: 11vw;
    position: absolute;
    left: 24.4vw;
    top: 22.6vw;
  }
  #an2shang {
    width: 11vw;
    height: 5vw;
    position: absolute;
    left: 13.2vw;
    top: 17.4vw;
  }
  #an2xia {
    width: 11vw;
    height: 5vw;
    position: absolute;
    left: 13.2vw;
    top: 33.8vw;
  }
  #an2fm {
    width: 20vw;
    height: 20vw;
    position: absolute;
    left: 69vw;
    top: 18vw;
  }
}
</style>
